<template>
	<view class="content">
		<!-- 第二块 -->
		<view class="ipts">
			<!-- 隐患来源 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患来源</span>
				</view>
				<view class="place-class">
					<easySelect class="easySelect"
						style="width:400rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;"
						:options="optionsData" ref="easySelect" :value="optionsDataText" @selectOne="optionsDatas">
					</easySelect>
				</view>
			</view>
			<!-- <view class="hengxian"></view> -->
			<!-- 隐患来源 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患类别</span>
				</view>
				<view class="place-class">
					<easySelect class="easySelect"
						style="width:400rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;" :options="options"
						ref="easySelect" :value="selecValue" @selectOne="selectOne"></easySelect>
				</view>
			</view>
			<!-- <view class="hengxian"></view> -->
			<!-- 隐患类型 v-if="optionsDataText != '内部隐患'"-->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患类型</span>
				</view>
				<text class="place-class">
					<easySelect class="easySelect"
						style="width:400rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;" :options="options1"
						ref="easySelect" :value="selecValue1" @selectOne="selectOne1"></easySelect>
				</text>
			</view>
			<!-- <view class="hengxian" v-if="type == '2' || type == '3'"></view> -->
			<!-- 自检状态 -->
			<!-- 	<view v-if="type == '2' || type == '3'" class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>自检状态</span>
				</view>
				<input v-if="selfsText != '正常'" v-model="selfsText" style="color: #999;font-size: 28rpx;" placeholder="请输入异常原因" type="text" value="" />
				<text class="place-class" v-else>
					<easySelect class="easySelect" style="width:175rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;" :options="selfs" ref="easySelect" :value="selfsText" @selectOne="selfsChange"></easySelect>
				</text>
				
			</view>
			<view class="hengxian"></view> -->
			<!-- 隐患地址 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患地址</span>
				</view>
				<input v-model="selecAdress" class="place-class" type="text" placeholder="请输入隐患地址" value="" />
				<image src="../../static/qxsb.png" mode="" style="width: 40rpx; height: 40rpx;"
					@click="tapMap(lat,long)"></image>
			</view>
			<!-- <view class="hengxian"></view> -->
			<!-- 隐患描述 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患描述</span>
				</view>
				<!-- <input v-model="selecText" class="place-class" type="text" placeholder="请输入该隐患的描述" value="" /> -->

				<!-- <span></span> -->
			</view>
			<view class="supplement">
				<view class="explain">
					<textarea v-model="selecText" maxlength="200" auto-height @input="textChange" class="textArea"
						value="" placeholder="请补充说明您的需求" />
				</view>
				<view class="suppBottom">
					<view class="num">
						<view class="">{{textNumber}}/200</view>
					</view>
				</view>
			</view>
			<!-- <view class="hengxian"></view> -->
			<!-- 隐患照片 -->
			<view class="info-item btop">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>截止日期</span>
				</view>
				<view class="danger-img-box">
					<view class="place-class" v-if="optionsTimeText != '其他'">
						<easy-select class="easySelect"
							style="width:400rpx;height:100%;color: #0000;font-size: 28rpx;color: #fff;"
							:options="optionsDate" ref="easySelect" :value="optionsTimeText" @selectOne="optionsDates">
						</easy-select>
					</view>
					<input v-else style="font-size: 28rpx;color: #99999;text-align: right;" type="text" v-else
						v-model="jieDate" placeholder="请输入截止如期" value="" />
				</view>
			</view>
			<!-- <view class="hengxian"></view> -->
			<!-- 隐患照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患照片</span>
				</view>
				<!-- 	<view class="danger-img-box">
					<view class="danger-img" v-if="!img" @click="handleUpdataImg">
						<image src="../../../static/updatePhoto.png" mode=""></image>
					</view>
					<view class="danger-img" v-else>
						<image :src="img" mode="" @tap="seeimg(img)"></image>
						
					</view>
				</view> -->


				<view class="danger-img-box">

					<view class="danger-img" v-for="(item,index) in img" :key="index">
						<image :src="item" @tap="seeimg(item)" mode=""></image>
						<view class="updeletes" @tap="updetail(index)">
							<image src="../../static/delete.png"></image>
						</view>


					</view>

					<view class="danger-img" v-if="img.length<3" @click="handleUpdataImg">
						<image src="../../static/updatePhoto.png" mode=""></image>
					</view>

				</view>




			</view>
		</view>
		<!-- 上次安检时间 -->
		<view class="ipts">
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患是否持续跟踪</span>
				</view>
				<view class="danger-img-box">
					<switch :checked="isChecked" @change="isChecked = !isChecked" style="transform:scale(0.7)" />
				</view>
			</view>
		</view>
		<view class="butn" @click="submit">立即上报</view>
		<!-- <view class="btns">
			<view class="btn1 consel">取消</view>
			<view class="btn1 save">保存</view>
		</view> -->
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />

	</view>
</template>

<script>
	import QQMapWX from "@/common/qqmap-wx-jssdk"
	import request from '../../common/request.js'
	export default {
		data() {
			return {
				long: '', //地理位置
				lat: '', //地理位置
				hunei_id: '', //户内id
				yinhuan_id: 2, // 隐患来源的id
				isChecked: false,
				showR: true,
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				options: [],
				options1: [],
				// 隐患来源
				selecValue: '请选择',
				// 隐患类型
				selecValue1: '请选择',
				token: '',
				// 开关状态
				checkeds: false,
				// 开关禁用
				disabled: true,
				// 上传图片路径
				fileImg: [],
				// 回显图片
				img: [],
				// 隐患地址
				selecAdress: '',
				// 隐患描述
				selecText: '',
				switchFlag: false,
				// 隐患来源
				optionsData: [{
						id: 2,
						label: '户外隐患'
					},
					{
						id: 1,
						label: '户内隐患'
					}
				],
				optionsDataText: '外部隐患',
				// 截止日期
				optionsTimeText: '立即',
				// optionsDate: ['立即','','30天','90天','其他']
				optionsDate: [{
						id: 1,
						label: '立即'
					},
					{
						id: 2,
						label: '15天'
					},
					{
						id: 3,
						label: '30天'
					},
					{
						id: 4,
						label: '90天'
					},
					{
						id: 5,
						label: '其他'
					},
				],
				jieDate: '',
				userId: '',
				equipment_type: '',
				type: '',
				textNumber: 0,

				selfs: [{
						id: 1,
						label: '正常'
					},
					{
						id: 2,
						label: '异常'
					}
				],
				selfsText: '正常'
			};
		},
		watch: {
			img: function(b, d) {
				if (b != null) {
					this.switchFlag = true
				}
			},
			switchFlag: function(v, a) {
				if (v == true) {
					this.disabled = false
				}
			}
		},
		onLoad(option) {

			// if(option.types) {
			this.type = option.type
			console.log('每日巡检options', option)
			// }
			if (option.id) {
				this.userId = option.id
				console.log('每日巡检', this.userId)
			} else {
				this.equipment_type = option.equipment_type
				this.equipment_id = option.equipment_id
			}
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
				this.getMap()
			})
			setTimeout(() => {
				// this.getexteData()
				if (this.optionsDataText == '外部隐患') {
					this.getexteData()
				}
				if (this.optionsDataText == '内部隐患') {
					this.getexteData()
				}
				// this.getInstallDetail()
			}, 10)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
			// this.getInstallDetail()
		},
		onReachBottom() {
			this.page++
			// this.getInstallDetail()
		},
		methods: {
			updetail(index) {
				this.img.splice(index, 1)
			},
			tapMap(lat, long) {
				console.log(lat, '0000000000000')
				console.log(long, '999999999999999')
				uni.navigateTo({
					url: '/pages/safety/maps/maps?lat=' + lat + '&long=' + long
				})
			},
			//获取地理位置
			getMap() {
				var qqmapsdk;
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.long = res.longitude
						that.lat = res.latitude
						qqmapsdk = new QQMapWX({
							key: "662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV" //自己申请的key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(addressRes) {
								console.log(addressRes)
								that.selecAdress = addressRes.result.address;
							},
							fail(res) {}
						});
					}
				});
			},
			textChange(e) {
				if (e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			// 截止日期
			optionsDates(option) {
				//截取字符串
				this.optionsTimeText = option.label.substr(0, 2)
				console.log('option.label', this.optionsTimeText)
			},
			selfsChange(option) {
				let that = this
				that.selfsText = option.label
				if (that.selfsText == '异常') {
					that.selfsText = ''
				}
			},
			optionsDatas(option) {
				let that = this
				that.selecValue = '请选择'
				that.selecValue1 = '请选择'
				that.optionsDataText = option.label
				that.yinhuan_id = option.id
				console.log('隐患id', that.yinhuan_id)
				if (that.optionsDataText == '外部隐患') {
					that.getexteData()
				}
				if (that.optionsDataText == '内部隐患') {
					that.getInsiData()
					that.options1 = []
				}
			},
			getexteData() {
				let that = this
				request.request({
					url: '/danger/get_danger_source_out',
					method: 'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					that.options = res.data.data
				})
				request.request({
					url: '/danger/get_danger_classify_out',
					method: 'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					that.options1 = res.data.data
				})
			},
			getInsiData() {
				let that = this
				request.request({
					url: '/danger/get_danger_source',
					method: 'POST',
					data: {
						token: that.token
					}
				}).then(res => {
					that.options = res.data.data
					console.log('kkkkk', that.options)
				})

			},
			hunei() {
				let that = this
				request.request({
					url: '/danger/get_danger_classify',
					method: 'POST',
					data: {
						token: that.token,
						source_id: that.hunei_id, //上一级选择的id
					}
				}).then(res => {
					that.options1 = res.data.data
					console.log('户内', res.data.data)
				})
			},
			selectOne(option) {
				var that = this
				this.selecValue = option.name
				this.hunei_id = option.id
				if (this.optionsDataText == '内部隐患') {
					that.hunei()
				}
			},
			selectOne1(option) {
				console.log('option', option)
				this.selecValue1 = option.name
			},
			// 是否跟踪
			switch1Change(e) {
				let that = this
				if (that.switchFlag) {
					that.disabled = false
				}
			},
			//图片预览
			seeimg(img) {
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 上传隐患照片
			handleUpdataImg() {
				var that = this;
				if (this.selecValue == '请选择') {
					uni.showToast({
						title: '请选择隐患类别',
						icon: 'none'
					})
					return
				}
				if (that.optionsDataText == '外部隐患') {
					if (this.selecValue1 == '请选择') {
						uni.showToast({
							title: '请选择隐患类型',
							icon: 'none'
						})
						return
					}
				}
				if (this.selecAdress == '') {
					uni.showToast({
						title: '请输入隐患地址',
						icon: 'none'
					})
					return
				}
				if (this.selecText == '') {
					uni.showToast({
						title: '请输入隐患描述',
						icon: 'none'
					})
					return
				}

				that.$refs.cpimg._changImg()

			},
			cpimgOk(file) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				})

				// 上传图片
				uni.uploadFile({
					// url:'https://trq.aoaojiao.online/api/common/upload',
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: that.token
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						/* if(dataPath.code == 1) {
							that.fileImg = dataPath.data.url
							that.img=file[0]
							
						} */


						if (dataPath.code == 1) {
							// that.fileImg = dataPath.data.url

							that.fileImg.push(dataPath.data.url)
							that.img.push(file[0])

						}




						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});

			},
			cpimgErr(e) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
				console.log(e)
			},


			// 立即上报
			submit() {
				let that = this
				console.log(that.selfsText)
				if (that.img == null) {
					uni.showToast({
						title: '请上传隐患照片',
						icon: 'none'
					})
					return
				}
				let is_finish = ''

				if (that.isChecked == false) {
					is_finish = '2'
				} else {
					is_finish = '1'
				}
				request.request({
					url: '/danger/danger_upload',
					method: 'POST',
					data: {
						token: that.token,
						address: that.selecAdress,
						description: that.selecText,
						// picture:that.fileImg,
						picture_1: that.fileImg[0],
						picture_2: that.fileImg[1],
						picture_3: that.fileImg[2],


						deadline_time: that.optionsTimeText,
						source: that.optionsDataText,
						classify: that.selecValue,
						type: that.type,
						is_finish: is_finish,
						member_id: that.userId,
						equipment_type: that.equipment_type,
						equipment_id: that.equipment_id,
						source_type: that.yinhuan_id,
						self_check: that.selfsText,
						long: that.long, //地理位置
						lat: that.lat, //地理位置
					}
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(() => {
							//?type=3  safety/rithcheck/ritycheck?type=3
							var pages = getCurrentPages()
							var prevPage = pages[pages.length - 2]
							prevPage.setData({
								type: this.type,
								danger_id: res.data.data
							})
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			close() {
				// uni.navigateTo({
				// 	url: '/pages/safety/rithcheck/ritycheck?type=' + this.types
				// })
				// uni.switchTab({
				// 	url:'../index/index'
				// })
			},
			showRecord() {
				this.showR = !this.showR
			},
			searchFocus() {
				this.showAcount = false
			},
			infoClick() {
				this.showAcount = !this.showAcount
			},
			// 退出登录
			logOut() {
				uni.clearStorage({
					key: 'logininfo',
					success: () => {
						this.showAcount = false
						uni.redirectTo({
							url: '../../login/login'
						})
					}
				})
			},
			// 跳转至记录页面
			toJiLu() {
				uni.navigateTo({
					url: './jilu'
				})
			},
			// 跳转用户信息页面
			toCaiLiao(id) {
				uni.navigateTo({
					url: '../userinfo/uninstall?id=' + id
				})
			},
			// 点击获取安装数据
			searchUser(val) {
				// this.getInstallDetail ()
				this.dosearch = true
				uni.navigateTo({
					url: '../query/query?key=' + val
				})
			},
		},
		onBackPress(e) {
			console.log('00000',e);
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}
	.btop{
		border-top: 1rpx solid #DDDDDD;
	}

	.danger-img {
		position: relative;

		.updeletes {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 88;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		position: relative;
		padding-bottom: 140rpx;
	}

	// header
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}

	.ipts {
		background-color: #fff;
		margin-top: 30rpx;
	}

	.info-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 72rpx;
		width: 100%;
		padding: 0rpx 30rpx;
		height: 100rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #DDDDDD;

		input {
			flex: 1;
			text-align: right;
			padding-right: 20rpx;
		}

		.dot {
			width: 8rpx;
			height: 8rpx;
			background-color: #003690;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.danger-img {
			position: relative;
			width: 75rpx;
			height: 75rpx;
			border: 2rpx dashed #eee;
			margin-right: 10rpx;
			text-align: center;

			image {
				width: 80%;
				height: 80%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.danger-img-box {
			display: flex;
		}

		.info-item-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.hengxian {
		width: 700rpx;
		height: 2rpx;
		background-color: #eee;
		margin: 20rpx auto;
	}

	.place-class {
		font-size: 26rpx;
		color: #999;
	}

	.btn {
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom, #2366D5, #001B48);
		font-size: 32rpx;
		color: #E5EFFE;
	}

	.btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;

		.btn1 {
			width: 50%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 28rpx;
		}

		.consel {
			background-color: #e9e9e9;
			color: #777;
		}

		.save {
			background-color: #003690;
			color: #fff;
		}
	}

	.btn:active {
		background: rgba(0, 0, 0, 0.4);
	}

	.record {
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 32rpx;
		margin-top: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}

		span {
			font-weight: 700;
		}
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;

		.record-item-left {
			display: flex;
			align-items: center;

			.shu {
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}

			.time {
				font-size: 28rpx;
				color: #777;
			}
		}

		.record-item-right {
			display: flex;
			align-items: center;

			.dianhua {
				width: 28rpx;
				height: 28rpx;
			}

			.zhankai {
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}

	.supplement {
		margin: 20rpx 28rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;

		.explain {
			.textArea {
				min-height: 142rpx;
				padding: 14rpx 30rpx;
				font-size: 32rpx;
				text-align: left;
				color: rgba(187, 187, 187, 0.84);
			}
		}

		.suppBottom {
			.danger-img {
				position: relative;
				margin-left: 50rpx;
				margin-bottom: 0rpx;
				width: 68rpx;
				height: 68rpx;
				float: left;

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.num {
				float: right;
				margin-right: 26rpx;
			}
		}
	}
</style>
